import { Radar, RadarConfig } from '@ant-design/charts';
import { useModel } from '@umijs/max';
import { useEffect, useState } from 'react';

const ChartRadar: React.FC = () => {
  const { business_diagnosis } = useModel('Resume.resumeModel');
  const [data, setData] = useState<any>([]);

  const initData = () => {
    let _data: any = [];
    business_diagnosis?.forEach((item: any) => {
      _data.push({
        name: item.key_point,
        value: Number(item.score),
      });
    });
    setData(_data);
  };

  const config: RadarConfig = {
    data: data.map((d: any) => ({ ...d, value: Math.sqrt(d.value) })),
    height: 300,
    xField: 'name',
    yField: 'value',
    tooltip: {
      fields: ['value'],
      showTitle: false, // 是否显示标题
      showCrosshairs: false, // 是否展示 crosshairs
      showContent: false,
    },
    xAxis: {
      tickLine: null,
      label: {
        offset: 4,
        // 字体显示不全，截断，两个字一行
        formatter: (value: string) => {
          return `${value.substring(0, 4)}\n${value.substring(4, 8)}`;
        },
        style: {
          fill: '#101010', // 字体颜色
        },
      },
    },
    yAxis: {
      label: false,
      grid: {
        alternateColor: '#fff',
        alignTick: true,
        closed: true,
        line: {
          style: {
            lineWidth: 1,
            stroke: '#ebedf0',
          },
        },
      },
    },
    // 开启辅助点
    point: {
      size: 8,
    },
    area: {
      // 设置多边形的边线样式
      style: {
        fillOpacity: 0.2,
      },
    },
    color: '#40a9ff',
  };

  useEffect(() => {
    initData();
  }, [business_diagnosis]);

  return <Radar {...config} />;
};

export default ChartRadar;
